import React, { Component } from "react";
import Header from "../../components/Header/Header";
import Cate from "./components/cate/cate";
import Banner from "./components/banner/banner";
import "./home.less";
import GetNew from "./components/getNew/getNew";
import { reqgetindexgoods, reqgetgroupon, reqgetseckill } from "../../http/api";
import Wanrentuan from "./components/wanrentuan/wanrentuan";
import SecKill from "./components/Seckill/SecKill";
import { Link } from "react-router-dom";
export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      title: ["时令水果", "新鲜蔬菜", "肉禽蛋品", "粮油调味"],
      cate: [], //总列表
      n: 0,
      grounpon: [],
      seckill: [],
      timeString: {
        day: "",
        hour: "",
        minute: "",
        second:""
      },
    };
    this.time = 1658899658737;
  }
  async componentDidMount() {
    this.computedTime();
    this.getSeckill();
    reqgetindexgoods().then((res) => {
      this.setState({
        cate: res.data.list,
      });
    });

    let res = await reqgetgroupon();
    this.setState({
      grounpon: res.data.list,
    });
  }
  computedTime() {
    this.timer = setInterval(() => {
      let d = new Date().getTime();
      let t = this.time - d; //差的毫秒数
      if (t > 0) {
        let day = (Math.floor(t / (24 * 60 * 60 * 1000)) + "").padStart(2, "0"); //天
        t = t % (24 * 60 * 60 * 1000); //剩余计算小时的毫秒数
        let hour = (Math.floor(t / (60 * 60 * 1000)) + "").padStart(2, "0"); //时
        t = t % (60 * 60 * 1000);
        let minute = (Math.floor(t / (60 * 1000)) + "").padStart(2, "0"); //分
        t = t % (60 * 1000);
        let second = (Math.floor(t / 1000) + "").padStart(2, "0"); //秒
        let mSecond = ((t % 1000) + "").padStart(3, "0");//毫秒

        this.setState({
          timeString: { day, hour, minute, second ,mSecond},
        });
      } else {
        this.setState({
          timeString: "秒杀活动已经结束",
        });
      }
    }, 1);
  }
  async getSeckill() {
    let r = await reqgetseckill();
    if (r.data.code == 200) {
      this.setState({
        seckill: r.data.list,
      });
    }
  }
  handleClick(index) {
    this.setState({
      n: index,
    });
  }

  render() {
    let { cate, title, n, grounpon, seckill, timeString } = this.state;

    return (
      <div>
        <Header title="首页"></Header>
        <Cate></Cate>
        <GetNew></GetNew>
        <Banner></Banner>
        <SecKill seckill={seckill} timeString={timeString}></SecKill>
        <div className="goods">
          {title.map((item, index) => {
            return (
              <span
                key={index}
                onClick={() => this.handleClick(index)}
                className={n == index ? "active" : null}
              >
                {" "}
                {item}
              </span>
            );
          })}
        </div>{" "}
        {cate.map((item, index) => {
          return (
            <div key={index} className="">
              {" "}
              {n === index
                ? item.content.map((i) => {
                    return (
                      <div key={i.id} className="every">
                        <Link to={"/detail/" + i.id}>
                          <p>商品名称{i.goodsname}</p>
                          <p>商品价格{i.price}</p>
                          <p>市场价格{i.market_price}</p>{" "}
                        </Link>
                      </div>
                    );
                  })
                : null}{" "}
            </div>
          );
        })}
        <Wanrentuan grounpon={grounpon}></Wanrentuan>
      </div>
    );
  }
}
